<!DOCTYPE html>
<html>
    <head>
        <title>Search</title>
    <meta name="comp1800 template" content="My 1800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Library CSS CDN go here -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"
        crossorigin="anonymous"></script>

    <!-- Other libraries go here -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    
    <!-- Link to styles of your own -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    <style>
      .content img,.content canvas{
        display: inline-block;
        vertical-align: top;
        margin-top: 30px;
      }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    </head>
    <body>
      <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#"> 
            <img src="images/logo.png" alt="Logo" width="120" height="120">
            DG1-05
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">search</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">regional</a>
                  </li>
              <li class="nav-item">
                <a class="nav-link" href="#">wind direction</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">warn</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">data</a>
              </li>
            </ul>
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
      <div class="input-group" style="width: 800px;margin-top: 40px;margin-left: auto;margin-right: auto;">
        <input type="text" class="form-control" placeholder="Please enter the location you want to search for" aria-label="Recipient’s username" aria-describedby="button-addon2">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
      </div>
      <div style="margin-left: 250px;margin-top: 40px;">
        <h2>Nearby detection
          <button type="button" class="btn btn-primary position-relative">
            new
            <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
              <span class="visually-hidden">New alerts</span>
            </span>
          </button>
        </h2>
      </div>
      <div>
        <div class="content">
          <img src="images/屏幕截图 2025-05-10 172001.png" alt="" width="600px" style="margin-left: 250px;margin-top: 20px;">
          <canvas id="myChart" width="600" height="400" ></canvas>
        </div>
      <script>
        const myChart = echarts.init(document.getElementById('myChart'));
         const option = {
         
        xAxis: {
        data: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
        },
        yAxis: {
        name: '水位测量 (m)'
        },
        series: [{
        name: '数据',
        type: 'line',
        data: [15000, 21000, 18500, 24000, 23500, 24000, 12500],
        lineStyle: {
        color: 'blue'
        }
        }]
        };
        myChart.setOption(option);
        </script>
      </div>
      <div class="d-flex gap-2 justify-content-center py-3"> 
        <button class="btn btn-primary d-inline-flex align-items-center" type="button">
          Water Level Warning<i class="bi bi-arrow-right"></i>
          <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg> </button>
          <button class="btn btn-primary d-inline-flex align-items-center" type="button">
            Historical data<i class="bi bi-arrow-right"></i>
            <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg> </button>
      </div>
      <div class="container" style="width: 800px;height: 300px;"> <footer> <ul class="nav justify-content-center border-bottom pb-3 mb-3"> </ul> <p class="text-center text-body-secondary">© 2025 DG1-05</p> </footer> </div>
  </body>
</html>
